<template>
  <view class="cyberpunk-result-container">
    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="back-btn" @click="goBack">
        ← 返回
      </view>
      <text class="title">诊断报告</text>
      <view class="timestamp">{{ result.timestamp }}</view>
    </view>
    
    <!-- 综合评分区域 -->
    <view class="score-section">
      <view class="score-display">
        <view class="score-circle">
          <view class="score-ring" :style="{ background: getScoreGradient() }">
            <view class="score-inner">
              <text class="score-number">{{ result.overallScore }}</text>
              <text class="score-label">综合评分</text>
            </view>
          </view>
        </view>
        <view class="score-status">
          <text class="status-text" :class="getScoreLevel().class">
            {{ getScoreLevel().text }}
          </text>
          <text class="status-desc">{{ getScoreLevel().desc }}</text>
        </view>
      </view>
    </view>
    
    <!-- 详细数据展示 -->
    <scroll-view scroll-y class="details-scroll">
      <!-- 网络连接状态 -->
      <view class="detail-section">
        <view class="section-header">
          <text class="section-icon">🌐</text>
          <text class="section-title">网络连接</text>
          <view class="connection-status" :class="result.isConnected ? 'connected' : 'disconnected'">
            {{ result.isConnected ? '已连接' : '未连接' }}
          </view>
        </view>
        
        <view class="metrics-grid">
          <view class="metric-item">
            <text class="metric-label">网络类型</text>
            <text class="metric-value">{{ getNetworkTypeName() }}</text>
          </view>
          <view class="metric-item">
            <text class="metric-label">信号强度</text>
            <view class="metric-bar">
              <view class="bar-bg">
                <view class="bar-fill" :style="{ width: result.signalStrength + '%' }"></view>
              </view>
              <text class="metric-value">{{ result.signalStrength }}%</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 速度测试结果 -->
      <view class="detail-section">
        <view class="section-header">
          <text class="section-icon">⚡</text>
          <text class="section-title">速度测试</text>
          <view class="speed-status" :class="getSpeedStatus()">
            {{ getSpeedText() }}
          </view>
        </view>
        
        <view class="speed-display">
          <view class="speed-item">
            <text class="speed-label">下载速度</text>
            <text class="speed-value">{{ result.downloadSpeed }} <text class="unit">Mbps</text></text>
            <view class="speed-bar">
              <view class="bar-fill download" :style="{ width: Math.min(result.downloadSpeed * 2, 100) + '%' }"></view>
            </view>
          </view>
          
          <view class="speed-item">
            <text class="speed-label">上传速度</text>
            <text class="speed-value">{{ result.uploadSpeed }} <text class="unit">Mbps</text></text>
            <view class="speed-bar">
              <view class="bar-fill upload" :style="{ width: Math.min(result.uploadSpeed * 2, 100) + '%' }"></view>
            </view>
          </view>
          
          <view class="latency-item">
            <text class="latency-label">延迟</text>
            <text class="latency-value" :class="getLatencyClass()">{{ result.latency }} ms</text>
          </view>
          
          <view class="packet-loss-item">
            <text class="packet-label">丢包率</text>
            <text class="packet-value" :class="getPacketLossClass()">{{ result.packetLoss }}%</text>
          </view>
        </view>
      </view>
      
      <!-- 设备信息 -->
      <view class="detail-section">
        <view class="section-header">
          <text class="section-icon">📱</text>
          <text class="section-title">设备信息</text>
        </view>
        
        <view class="device-info">
          <view class="info-row">
            <text class="info-label">设备型号</text>
            <text class="info-value">{{ result.deviceInfo.brand }} {{ result.deviceInfo.model }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">操作系统</text>
            <text class="info-value">{{ result.deviceInfo.system }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">屏幕分辨率</text>
            <text class="info-value">{{ result.deviceInfo.screenWidth }}×{{ result.deviceInfo.screenHeight }}</text>
          </view>
        </view>
      </view>
      
      <!-- 优化建议 -->
      <view class="detail-section">
        <view class="section-header">
          <text class="section-icon">💡</text>
          <text class="section-title">优化建议</text>
        </view>
        
        <view class="recommendations">
          <view 
            v-for="(recommendation, index) in result.recommendations" 
            :key="index"
            class="recommendation-item"
          >
            <view class="recommendation-dot"></view>
            <text class="recommendation-text">{{ recommendation }}</text>
          </view>
        </view>
      </view>
      
      <!-- 底部空间 -->
      <view style="height: 100px;"></view>
    </scroll-view>
    
    <!-- 底部操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn secondary" @click="reDiagnostic">重新诊断</button>
      <button class="action-btn primary" @click="shareReport">分享报告</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 直接在页面中定义固定的演示数据
const result = ref({
  networkType: 'wifi',
  isConnected: true,
  signalStrength: 92,
  downloadSpeed: 68.5,
  uploadSpeed: 52.3,
  latency: 18,
  packetLoss: 0.2,
  deviceInfo: {
    platform: 'android',
    system: 'Android 13',
    model: 'Pixel 7 Pro',
    brand: 'Google',
    screenWidth: 1440,
    screenHeight: 3120,
    version: '13.0'
  },
  timestamp: '2024-01-15 14:32:18',
  overallScore: 95,
  recommendations: [
    '网络状况优秀，连接稳定性极佳',
    '信号强度优异，建议保持当前网络环境',
    '速度表现出色，可流畅运行高清视频和在线游戏',
    '延迟极低，适合实时通信和云游戏应用',
    '建议定期检查路由器固件更新以维持最佳性能'
  ]
});

// 获取网络类型名称
const getNetworkTypeName = () => {
  const typeMap = {
    'wifi': 'WiFi 6',
    '5g': '5G',
    '4g': '4G',
    '3g': '3G', 
    '2g': '2G',
    'none': '无网络',
    'unknown': '未知'
  };
  return typeMap[result.value.networkType] || 'WiFi 6';
};

// 获取评分等级
const getScoreLevel = () => {
  const score = result.value.overallScore;
  if (score >= 90) {
    return { text: '卓越', desc: '网络性能表现卓越', class: 'excellent' };
  } else if (score >= 80) {
    return { text: '优秀', desc: '网络状况极佳', class: 'excellent' };
  } else if (score >= 60) {
    return { text: '良好', desc: '网络基本正常', class: 'good' };
  } else if (score >= 40) {
    return { text: '一般', desc: '网络有待改善', class: 'fair' };
  } else {
    return { text: '较差', desc: '网络存在问题', class: 'poor' };
  }
};

// 获取评分渐变色
const getScoreGradient = () => {
  const score = result.value.overallScore;
  if (score >= 90) {
    return 'conic-gradient(from 0deg, #00ff00, #00ffff, #00ff00)';
  } else if (score >= 80) {
    return 'conic-gradient(from 0deg, #00ff00, #00ffff)';
  } else if (score >= 60) {
    return 'conic-gradient(from 0deg, #00ffff, #0080ff)';
  } else if (score >= 40) {
    return 'conic-gradient(from 0deg, #ffff00, #ff8000)';
  } else {
    return 'conic-gradient(from 0deg, #ff0000, #ff00ff)';
  }
};

// 获取速度状态
const getSpeedStatus = () => {
  const speed = result.value.downloadSpeed;
  if (speed >= 50) return 'fast';
  if (speed >= 20) return 'normal';
  return 'slow';
};

// 获取速度文本
const getSpeedText = () => {
  const speed = result.value.downloadSpeed;
  if (speed >= 50) return '极速';
  if (speed >= 20) return '高速';
  if (speed >= 10) return '正常';
  return '较慢';
};

// 获取延迟样式类
const getLatencyClass = () => {
  const latency = result.value.latency;
  if (latency <= 30) return 'excellent';
  if (latency <= 50) return 'excellent';
  if (latency <= 100) return 'good';
  if (latency <= 200) return 'fair';
  return 'poor';
};

// 获取丢包率样式类
const getPacketLossClass = () => {
  const loss = result.value.packetLoss;
  if (loss <= 0.5) return 'excellent';
  if (loss <= 1) return 'excellent';
  if (loss <= 3) return 'good';
  if (loss <= 5) return 'fair';
  return 'poor';
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 重新诊断
const reDiagnostic = () => {
  uni.navigateBack();
};

// 分享报告
const shareReport = () => {
  const shareText = `🚀 我的网络诊断报告 🚀

📊 综合评分：${result.value.overallScore}/100 (${getScoreLevel().text})
🌐 网络类型：${getNetworkTypeName()}
⬇️ 下载速度：${result.value.downloadSpeed} Mbps
⬆️ 上传速度：${result.value.uploadSpeed} Mbps
📶 信号强度：${result.value.signalStrength}%
⚡ 网络延迟：${result.value.latency} ms
📱 设备型号：${result.value.deviceInfo.brand} ${result.value.deviceInfo.model}
🕐 诊断时间：${result.value.timestamp}

✨ 网络性能表现卓越！`;

  uni.setClipboardData({
    data: shareText,
    success: () => {
      uni.showToast({
        title: '报告已复制到剪贴板',
        icon: 'success'
      });
    },
    fail: () => {
      uni.showToast({
        title: '复制失败，请重试',
        icon: 'none'
      });
    }
  });
};
</script>

<style>
.cyberpunk-result-container {
  background: linear-gradient(135deg, #000 0%, #1a0033 50%, #000 100%);
  color: #fff;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  width: 100%;
  box-sizing: border-box;
}

.back-btn {
  color: #00ffff;
  font-size: 16px;
  padding: 5px;
  cursor: pointer;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #ff00ff;
  text-transform: uppercase;
}

.timestamp {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.score-section {
  padding: 30px 20px;
  text-align: center;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-circle {
  margin-bottom: 20px;
}

.score-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5px;
  animation: score-glow 3s ease-in-out infinite alternate;
}

@keyframes score-glow {
  0% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); }
  100% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 0, 0.6); }
}

.score-inner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.score-number {
  font-size: 32px;
  font-weight: bold;
  color: #00ffff;
  line-height: 1;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

.score-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 5px;
}

.score-status {
  text-align: center;
}

.status-text {
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
  text-transform: uppercase;
  text-shadow: 0 0 10px currentColor;
}

.status-text.excellent { 
  color: #00ff00; 
  animation: excellent-pulse 2s ease-in-out infinite alternate;
}
.status-text.good { color: #00ffff; }
.status-text.fair { color: #ffff00; }
.status-text.poor { color: #ff0000; }

@keyframes excellent-pulse {
  0% { text-shadow: 0 0 10px #00ff00; }
  100% { text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00; }
}

.status-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.details-scroll {
  height: calc(100vh - 280px);
  padding: 0 20px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.detail-section {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 10px;
  margin: 0 auto 20px auto;
  padding: 20px;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.detail-section:hover {
  border-color: rgba(0, 255, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-icon {
  font-size: 20px;
  margin-right: 10px;
}

.section-title {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
  color: #ff00ff;
  text-transform: uppercase;
}

.connection-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.connection-status.connected {
  background: rgba(0, 255, 0, 0.2);
  color: #00ff00;
  border: 1px solid #00ff00;
  animation: connected-pulse 2s ease-in-out infinite alternate;
}

@keyframes connected-pulse {
  0% { box-shadow: 0 0 5px rgba(0, 255, 0, 0.5); }
  100% { box-shadow: 0 0 15px rgba(0, 255, 0, 0.8); }
}

.connection-status.disconnected {
  background: rgba(255, 0, 0, 0.2);
  color: #ff0000;
  border: 1px solid #ff0000;
}

.metrics-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.metric-value {
  font-size: 14px;
  color: #00ffff;
  font-weight: bold;
}

.metric-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  margin-left: 20px;
}

.bar-bg {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  border-radius: 3px;
  transition: width 0.3s ease;
  animation: bar-glow 2s ease-in-out infinite alternate;
}

@keyframes bar-glow {
  0% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
  100% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.8); }
}

.speed-display {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.speed-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.speed-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.speed-value {
  font-size: 24px;
  color: #00ffff;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

.unit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.speed-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.speed-bar .bar-fill.download {
  background: linear-gradient(90deg, #00ff00, #00ffff);
  animation: download-flow 3s ease-in-out infinite;
}

.speed-bar .bar-fill.upload {
  background: linear-gradient(90deg, #ff00ff, #ffff00);
  animation: upload-flow 3s ease-in-out infinite;
}

@keyframes download-flow {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 0, 0.5); }
  50% { box-shadow: 0 0 15px rgba(0, 255, 0, 0.8); }
}

@keyframes upload-flow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 0, 255, 0.5); }
  50% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.8); }
}

.latency-item, .packet-loss-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.latency-label, .packet-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.latency-value, .packet-value {
  font-size: 16px;
  font-weight: bold;
}

.latency-value.excellent, .packet-value.excellent { 
  color: #00ff00; 
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
}
.latency-value.good, .packet-value.good { color: #00ffff; }
.latency-value.fair, .packet-value.fair { color: #ffff00; }
.latency-value.poor, .packet-value.poor { color: #ff0000; }

.speed-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.speed-status.fast {
  background: rgba(0, 255, 0, 0.2);
  color: #00ff00;
  border: 1px solid #00ff00;
  animation: fast-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes fast-pulse {
  0% { box-shadow: 0 0 5px rgba(0, 255, 0, 0.5); }
  100% { box-shadow: 0 0 15px rgba(0, 255, 0, 0.8); }
}

.speed-status.normal {
  background: rgba(0, 255, 255, 0.2);
  color: #00ffff;
  border: 1px solid #00ffff;
}

.speed-status.slow {
  background: rgba(255, 255, 0, 0.2);
  color: #ffff00;
  border: 1px solid #ffff00;
}

.device-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.info-value {
  font-size: 14px;
  color: #00ffff;
  font-weight: bold;
}

.recommendations {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommendation-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: recommendation-fade-in 0.5s ease-in-out;
}

@keyframes recommendation-fade-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.recommendation-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ffff;
  margin-top: 8px;
  flex-shrink: 0;
  animation: dot-pulse 2s ease-in-out infinite alternate;
}

@keyframes dot-pulse {
  0% { box-shadow: 0 0 3px rgba(0, 255, 255, 0.5); }
  100% { box-shadow: 0 0 8px rgba(0, 255, 255, 0.8); }
}

.recommendation-text {
  flex: 1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  background: rgba(0, 0, 0, 0.9);
  padding: 15px 20px;
  border-top: 1px solid rgba(0, 255, 255, 0.3);
  display: flex;
  gap: 15px;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.action-btn {
  flex: 1;
  height: 45px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn.primary {
  background: linear-gradient(135deg, #ff00ff, #00ffff);
  color: #000;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
}

.action-btn.primary:hover {
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
}

.action-btn.secondary {
  background: transparent;
  color: #00ffff;
  border: 2px solid #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.action-btn.secondary:hover {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}
</style>